<template>
  <view>
    <view class="mine-container">
      <view
        class="mall-container"
        :style="'padding-top:' + setting.header.allHeight + 'px'"
      >
        <mineHead
          :setting="setting"
          @toMine="toMine"
          :userInfo="userInfo"
          @uploadUser="uploadUser"
          @pop="popAuth"
        ></mineHead>
        <view class="isHomePage" v-if="setting.isHomePage">
          <view class="mine-vip-card">
            <view class="inner">
              <view class="mine-ul">
                <view class="mine-li" @click="toHomePage">
                  <view class="mine-data">{{ statistics.talking_count }}</view>
                  <view class="mine-explain">动态</view>
                </view>
                <view class="mine-li" @click="toConcern">
                  <view class="mine-data">{{ statistics.like_count }}</view>
                  <view class="mine-explain">关注</view>
                </view>
                <view class="mine-li" @click="toFans">
                  <view class="mine-data">{{
                    statistics.fans_info.fans_count || 0
                  }}</view>
                  <view class="mine-explain">粉丝</view>
                  <view
                    class="dot"
                    v-if="statistics.fans_info.has_newer"
                  ></view>
                </view>
                <view class="mine-li" @click="toVisitor">
                  <view class="mine-data">{{
                    statistics.recent_visitors_info.visitor_count || 0
                  }}</view>
                  <view class="mine-explain">最近访客</view>
                  <view
                    class="dot"
                    v-if="statistics.recent_visitors_info.has_newer"
                  ></view>
                </view>
              </view>
              <!-- <view class="mine-vip-hint" @click="toVip">
                <view class="vip-hint-top">
                  <view class="vip-hint-top-left">
                    <view class="vip-hint-title">VIP特权</view>
                    <view class="vip-tag"
                      ><text class="vip-tag-text">{{
                        vipInfo.vip_level != -1 ? "去续费" : "去开通"
                      }}</text></view
                    >
                  </view>
                  <view
                    class="vip-last-time"
                    v-if="vipInfo.vip_level != -1 && vipInfo.expire_date"
                    >{{ vipInfo.expire_date.slice(0, 10) }}到期</view
                  >
                </view>
                <view class="vip-hint-bot">
                  <text class="vip-tag">会员折扣</text>
                  <text class="vip-tag">约会体验</text>
                  <text class="vip-tag">尊享红娘</text>
                  <text class="vip-tag">30朵玫瑰/月</text>
                </view>
              </view> -->
              <view class="vip-presented-box" @click="toInvitation">
                <image
                  src="http://static.kuaimayoupin.com/4286646224380972.png"
                  mode="aspectFit"
                  class="vip-presented-pic"
                ></image>
                <image
                  src="http://static.kuaimayoupin.com/7891719475416772.png"
                  mode="aspectFit"
                  :class="[
                    { getVip: shrinkPacket },
                    { getVip1: !shrinkPacket },
                  ]"
                ></image>
              </view>
            </view>
          </view>
          <view class="line"></view>
          <view class="mine-service inner">
            <view class="mine-title">我的服务</view>
            <view class="mine-ul mine-service-ul">
              <view class="mine-li" @click="toOrderPage">
                <image
                  src="http://static.kuaimayoupin.com/5699445714574598.png"
                  mode=""
                ></image>
                <text>订单</text>
              </view>
              <!-- <view class="mine-li">
                <navigator url="/pageA/rose/rose">
                  <image
                    src="http://static.kuaimayoupin.com/3811681107063240.png"
                    mode=""
                  ></image>
                  <text>我的玫瑰</text>
                </navigator>
              </view> -->
              <view class="mine-li">
                <button
                  type="primary"
                  class="text"
                  style="
                    background-color: #ffffff;
                    color: #000000;
                    font-size: 28upx;
                    margin-top: -10upx;
                  "
                  open-type="contact"
                >
                  <image
                    src="http://static.kuaimayoupin.com/1339222655347236.png"
                    mode=""
                  ></image>
                  <text>客服</text>
                </button>
              </view>
			  <view class="mine-li" @click="toDingzhi">
			      <image
			        src="https://static.kuaimayoupin.com/7272546759173444.png"
			        mode=""
			      ></image>
			      <text>定制缘分</text>
			  </view>
			  <view class="mine-li" @click="toRealName">
			      <image
			        src="https://static.kuaimayoupin.com/9151301548781414.png"
			        mode=""
			      ></image>
			      <text>实名认证</text>
			  </view>
            </view>
          </view>
        </view>
      </view>
      <u-toast ref="uToast" />
    </view>
    <loginDialog
      :isShow="isShowLogin"
      @goProtocol="goProtocol"
      v-on:decryptPhoneNumber="decryptPhoneNumber"
      v-on:dismiss="loginDismiss"
    ></loginDialog>

    <TabBar :current-page="4" />
  </view>
</template>

<script>
import { mapState } from "vuex";
import mineHead from "@/components/mine-head/mine-head.vue";
import { statistics, loadVipinfo, getInfo } from "@/api/user/user.js";
import loginDialog from "@/components/login/login-dialog.vue";
import wxKeyManager from "@/util/getWXKey.js";
import { EventBus } from "@/util/event-bus.js";
export default {
  computed: {
    ...mapState({
      vuex_tabbar: (state) => state.tabbarStore.vuex_tabbar,
    }),
  },
  components: {
    mineHead,
    loginDialog,
  },
  data() {
    return {
      isShowLogin: false,
      shrinkPacket: false,
      setting: {
        header: {
          top: 0,
          height: 0,
          allHeight: 0,
        },
        isHomePage: true,
      },
      userInfo: {},
      statistics: {
        talking_count: "0",
        like_count: "0",
        fans_count: "0",
        recent_visitors_count: "0",
      },
      vipInfo: {},
      type: "",
      timer: "",
      platform: "ios",
    };
  },
  created() {
    const header = uni.getMenuButtonBoundingClientRect();
    this.setting.header.top = header.top;
    this.setting.header.height = header.height;
    this.setting.header.allHeight = header.top + header.height + 6;
  },
  onShow() {
    this.init();
  },
  onLoad(option) {
    this.startRotate();
    this.type = option.type;
    this.getSystemInfo();
  },
  methods: {
    getSystemInfo() {
      let that = this;
      uni.getSystemInfo({
        success: function (res) {
          that.platform = res.platform;
        },
      });
    },
    popAuth() {
      this.isShowLogin = true;
    },
    loginDismiss() {
      this.isShowLogin = false;
      console.log("loginDismiss---------xxx");
    },
    decryptPhoneNumber(e) {
      let that = this;
      wxKeyManager.decryptPhoneNumber(e).then((res) => {
        console.log("decryptPhoneNumber---", res);
        that.isShowLogin = false;
        that.isLogin = true;
        EventBus.$emit("loginSuccess", true);
        that.didCustomize = (res.customized || false) == true;
        that.init();
      });
    },

    showAuthAction(userInfo) {
      this.showAuth = true;
      this.userName = userInfo.userName;
      this.avatar = userInfo.avatar;
    },
    // 关闭弹框
    close_layer() {
      this.isShow = false;
    },
    goProtocol(type) {
      uni.navigateTo({
        url: "/pageA/protocol/protocol?type=" + type,
      });
    },
    startRotate() {
      this.timer = setInterval(() => {
        this.shrinkPacket = !this.shrinkPacket;
      }, 500);
    },

    getTime(data) {
      var date = new Date(data);
      var nian = date.getFullYear();
      var yue = date.getMonth() + 1;
      var ri = date.getDate();
      console.log(nian + yue + ri);
    },
    toConcern() {
      uni.navigateTo({
        url: "/pageA/fans/fans?type=concern",
      });
    },
    toFans() {
      uni.navigateTo({
        url: "/pageA/fans/fans?type=fans",
      });
    },
    toVisitor() {
      uni.navigateTo({
        url: "/pageA/fans/fans?type=visitor",
      });
    },
    toHomePage() {
      uni.navigateTo({
        url: `/pageA/homepage/homepage?index=0`,
      });
    },
    init() {
      let that = this;
      try {
        getInfo().then((res) => {
          uni.setStorageSync("userInfo", res.data);
          that.userInfo = Object.assign({}, that.userInfo, res.data);
          getApp().globalData.userInfo = that.userInfo;
        });
        // const userinfo = uni.getStorageSync('userInfo');
        // this.userInfo = Object.assign({}, this.userInfo, userinfo);
      } catch (e) {
        this.$refs.uToast.show({
          title: "当前未登陆",
          type: "error",
        });
      }
      statistics().then((res) => {
        if (res.status == 1) {
          this.statistics = Object.assign({}, this.statistics, res.data);
        }
      });
      loadVipinfo().then((res) => {
        this.vipInfo = res.data;
        console.log(this.vipInfo);
        console.log("-=-=888");
        getApp().globalData.vipInfo = this.vipInfo;
        uni.setStorageSync("vipInfo", res.data);
        Object.assign({}, this.vipInfo, res.data);
        console.log(this.vipInfo, "=====");
      });
    },
    toInvitation() {
      uni.navigateTo({
        url: "/pageA/invitation/invitation",
      });
    },
    picsuccess(e) {
      console.log(e);
    },
    toMine() {
      this.setting.isHomePage = true;
    },
    toOrderPage() {
      uni.navigateTo({
        url: `/pageA/order/order`,
      });
    },
	toDingzhi(){
		uni.navigateTo({
		  url: `/pageA/my-profile/dingzhi`,
		});
	},
	toRealName(){
		uni.navigateTo({
		  url: `/pageA/realName/realName`,
		});
	},
    uploadUser() {
      this.init();
    },
    checkLogin() {
      const userInfo = uni.getStorageSync("userInfo") || {};
      return userInfo.codeID != null;
    },
    toVip() {
      if (!this.checkLogin()) {
        this.popAuth();
        return;
      }
      if (this.platform ) {
        uni.showToast({
          icon: "none",
          title: "敬请期待", 
        });
      } else {
        uni.navigateTo({
          url: "/pageA/vip/vip",
        });
      }
    },
    beforeSwitch(index) {
      console.log("home beforeSwitch====mine=", index);
      if (index != 2) {
        return true;
      } else {
        uni.navigateTo({
          url: "/publish/publish",
        });
        return false;
      }
    },
  },
};
</script>

<style lang="scss">
button::after {
  border: none;
}
.mine-container {
  background-color: #fff;
}

.mall-container {
  background-image: url("http://static.kuaimayoupin.com/529894327355388.png");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 108upx;
}

.mine-ul {
  display: flex;
  // justify-content: space-between;

  .mine-li {
    width: 25%;
    position: relative;
    .mine-data {
      font-size: 36upx;
      color: #474a58;
      line-height: 48upx;
      text-align: center;
    }
    .mine-explain {
      font-size: 28upx;
      line-height: 36upx;
      color: rgba(131, 137, 160, 1);
      text-align: center;
    }
    .dot {
      display: block;
      width: 10upx;
      height: 10upx;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 0;
      right: 20upx;
    }
  }
}

.mine-vip-card {
  background: #fff;
  margin-top: -50upx;
  border-radius: 12px 12px 0 0;
  padding: 40upx 0 30upx;

  .mine-vip-hint {
    background-image: url("http://static.kuaimayoupin.com/6525239136045047.png");
    padding: 32upx;
    margin: 40upx 0;
  }
}

.vip-tag {
  background: linear-gradient(
    176deg,
    rgba(255, 232, 135, 1) 0%,
    rgba(244, 196, 73, 1) 100%
  );
  // border-radius: 12px;
  display: inline-block;
  width: 124upx;
  height: 48upx;
  text-align: center;
  line-height: 48upx;
  font-size: 28upx;
  border: 1px solid #e6cb9c;
  .vip-tag-text {
    color: rgba(41, 34, 35, 1);
    background: linear-gradient(
      173deg,
      rgba(200, 129, 42, 1) 0%,
      rgba(104, 56, 7, 1) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.vip-hint-bot {
  .vip-tag {
    width: auto;
    line-height: 70upx;
    height: 70upx;
    padding: 0 10upx !important;
  }
}
.vip-hint-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20upx;

  .vip-hint-top-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .vip-hint-title {
      font-size: 28upx;
      line-height: 36upx;
      color: rgba(71, 74, 88, 1);
      font-weight: 500;
      margin-right: 10upx;
    }
  }

  .vip-last-time {
    font-size: 28upx;
    color: rgba(71, 74, 88, 1);
  }
}

.vip-hint-bot {
  display: flex;
  justify-content: space-between;

  .vip-tag {
    font-size: 28upx;
    color: rgba(71, 74, 88, 1);
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(230, 203, 156, 1);
    padding: 10upx;
  }
}

.vip-presented {
  display: flex;
  justify-content: space-between;

  .vip-presented-left {
    font-size: 28upx;
    color: rgba(71, 74, 88, 1);

    .vip-card-number {
      color: #fe1ec4;
    }
  }

  .vip-presented-right {
    width: 192upx;
    line-height: 48upx;
    color: #fff;
    font-size: 24upx;
    text-align: center;
    background: linear-gradient(
      135deg,
      rgba(252, 79, 145, 1) 0%,
      rgba(253, 108, 230, 1) 100%
    );
  }
}

.mine-title {
  font-size: 36upx;
  color: rgba(71, 74, 88, 1);
  font-weight: 500;
  line-height: 48px;
}

.mine-service-ul {
  text-align: center;
}

.mine-service-ul image {
  display: block;
  width: 42upx;
  height: 42upx;
  margin: 10upx auto;
}

.vip-presented-box {
  position: relative;
  padding-top: 25rpx;
}

.vip-presented-pic {
  display: block;
  width: 100%;
  height: 164upx;
}

.getVip1 {
  position: absolute;
  right: 18upx;
  top: 25upx;
  width: 120upx;
  height: 120upx;
  z-index: 99;
}
.getVip {
  position: absolute;
  right: 18upx;
  top: 18upx;
  width: 140upx;
  height: 140upx;
  z-index: 99;
}
</style>
